body{
    background-color: black;
}
.box2{
    width: 200px;
    height: 200px;
    border: 5px solid white;
    position: fixed;
    inset: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(10deg);
}
.box2>img{
    height: 100%;
    width: 100%;
    position: absolute;
    /* 不透明度 */
    opacity: 0.4;
    /* 盒子阴影: 水平偏移 垂直偏移 模糊度 扩张度 阴影颜色 */
    box-shadow: 0 0 20px 2px white;
    /* 倒影  */
    -webkit-box-reflect: below 10px linear-gradient(to bottom,transparent,rgba(0,0,0,.2));
}
.box2>img:nth-child(1){
    transform: translateZ(100px);
}
.box2>img:nth-child(2){
    transform: rotateY(90deg) translateZ(100px);
}
.box2>img:nth-child(3){
    transform: rotateY(180deg) translateZ(100px);
}
.box2>img:nth-child(4){
    transform: rotateY(270deg) translateZ(100px);
}
.box2>img:nth-child(5){
    transform: rotateX(90deg) translateZ(100px);
}
.box2>img:nth-child(6){
    transform: rotateX(-90deg) translateZ(100px);
}

.box2>img:nth-child(7){
    /* xyz同时缩放0.5 */
    transform:scale3d(0.5,0.5,0.5) translateZ(100px);
}
.box2>img:nth-child(8){
    transform:scale3d(0.5,0.5,0.5) rotateY(90deg) translateZ(100px);
}
.box2>img:nth-child(9){
    transform:scale3d(0.5,0.5,0.5) rotateY(180deg) translateZ(100px);
}
.box2>img:nth-child(10){
    transform:scale3d(0.5,0.5,0.5) rotateY(270deg) translateZ(100px);
}
.box2>img:nth-child(11){
    transform:scale3d(0.5,0.5,0.5) rotateX(90deg) translateZ(100px);
}
.box2>img:nth-child(12){
    transform:scale3d(0.5,0.5,0.5) rotateX(-90deg) translateZ(100px);
}

.box2>img:nth(n+7){
    opacity: 1;
}